<template>
       <div>
    <div class="wrap" style="position: relative;
  width: 476px;
  height: 240px;
  box-shadow: 0 0 10px #bbb;
  background-color: rgba(140, 157, 173, 0.637);
  padding: 10px 0;
 ">
      <div class="right" style="
  display: grid;
  flex-direction: column;
  height: 240px;">
        <div style="width: 468px;
  height: 120px;" ref="transCap"></div>
        <div style="width: 468px;
  height: 120px;" ref="transNum"></div>
        <div style="position: absolute;
    right: 39px;
    top: 48px;
    border: 7px solid;
    border-color: #15ffb4 transparent transparent transparent;
    transform: rotate(0);" class="mark mark_1"></div>
        <div style="width: 0px;
  height: 120px;position: absolute;
    right: 39px;
    top: 48px;
    border: 7px solid;
    border-color: #15ffb4 transparent transparent transparent;
    transform: rotate(0);
    top: 168px;" class="mark mark_2"></div>
      </div>
      <img src="../assets/01/1442.png" style="width: 99%;
  height: 100%;
  left: 1%;
  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 0;" />
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
    data(){
        return{ 
            transCapacity: 1056 + ' KW', //当日输电量
            transNumber: 237 + ' 次', //当日输电次数
        }
    },
    methods: {
        drawChart(chart,title,currentPower) {
            // 数据数量
            var num = 30;
            // 列数
            var columns = function(i) {
                let a = [];
                for (let j = 0; j < i; j++) {
                a.push("");
                }
                return a;
            };
            // 随机数据
            var random_data = function(min, max, num) {
                let a = [];
                for (let i = 0; i < num; i++) {
                let rand = Math.floor(Math.random() * (max - min)) + min;
                a.push(rand);
                }
                // 得到初始化随机数据 a
                return a;
            };
            let currentData = random_data(10, 70, num);
            // 实时获取新数据并刷新
            let speed = 1000;
            var timer = setInterval(function() {
                currentData.shift();
                let rand = Math.floor(Math.random() * (70 - 10)) + 10;
                currentPower = rand;
                currentData.push(rand);
                // console.log(currentData);
                chart.setOption(option);
            }, speed);
            // 初始化表格
            var chart = echarts.init(chart);
            var option = {
                // backgroundColor: "#080b30",
                title: [
                {
                    text: title,
                    textStyle: {
                    align: "left",
                    color: "rgb(218, 218, 218)",
                    fontSize: 14,
                    fontWeight: 300
                    },
                    top: "4%",
                    left: "5%"
                },
                {
                    text: currentPower,
                    textStyle: {
                    align: "left",
                    color: "#fff",
                    fontSize: 20,
                    fontWeight: 500,
                    fontFamily: "sans-serif"
                    },
                    top: "20%",
                    left: "4.5%"
                }
                ],
                // 鼠标划入提示样式
                tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                        {
                            offset: 0,
                            color: "rgba(0, 255, 233,0)"
                        },
                        {
                            offset: 0.5,
                            color: "rgba(255, 255, 255,1)"
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 255, 233,0)"
                        }
                        ],
                        global: false
                    }
                    }
                }
                },
                grid: {
                top: "40%",
                left: "5%",
                right: "5%",
                bottom: "10%"
                },
                xAxis: [
                {
                    show: false,
                    data: columns(num)
                }
                ],
                yAxis: [
                {
                    type: "value",
                    min: 0,
                    // max: 140,
                    splitNumber: 1,
                    splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(218, 218, 218, 0.616)"
                    }
                    },
                    axisLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false,
                    margin: 20,
                    textStyle: {
                        color: "#d1e6eb"
                    }
                    },
                    axisTick: {
                    show: false
                    }
                }
                ],
                series: [
                {
                    name: "注册总量",
                    type: "line",
                    smooth: false, //是否平滑
                    showSymbol: false,

                    lineStyle: {
                    normal: {
                        color: "#15ffb4"
                    }
                    },
                    label: {
                    // show: true,
                    // position: 'top',
                    // textStyle: {
                    //     color: '#00b3f4',
                    // }
                    },
                    itemStyle: {
                    // color: "#00b3f4",
                    // borderColor: "#fff",
                    // borderWidth: 10,
                    // shadowColor: 'rgba(0, 0, 0, .3)',
                    // shadowBlur: 0,
                    // shadowOffsetY: 2,
                    // shadowOffsetX: 2,
                    },
                    tooltip: {
                    show: false
                    },
                    areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0,0,0,1,
                        [
                            {
                            offset: 0,
                            color: "rgba(15, 194, 140, 0.9)"
                            },
                            {
                            offset: 1,
                            color: "rgba(15, 194, 140, 0.2)"
                            }
                        ],
                        false
                        )
                    }
                    },
                    data: currentData,
                    animation: false
                }
                ]
            };
            chart.setOption(option);
            }
    },
    mounted() {
        this.drawChart(this.$refs.transCap,'当日充电量（小时）',this.transCapacity);
        this.drawChart(this.$refs.transNum,'当日充电次数（小时）',this.transNumber);
        // console.log(this.$refs.transCap)
    }
}
</script>

<style>

</style>